<template>
	<view class="page_login">
		<!-- 头部logo -->
		<headLogo/>
		<!-- form -->
		<view class="login_form">
			<view class="input">
				<m-input class="m-input" type="number" clearable focus v-model.trim="phoneNo" placeholder="请输入手机号"></m-input>
			</view>
			<view class="line" />
			<view class="code " style="">
				<m-input class="m-input" type="number"   v-model.trim="code" placeholder="请输入验证码"></m-input>
				<button type="primary" plain="" @click="getCode" v-text='codeText'></button>
			</view>
			<view class="line" />
			<view class="input">
				<m-input type="password" displayable v-model.trim="password" placeholder="请输入新密码"></m-input>
			</view>
		</view>
		<!-- 提交 -->
		<view class="btn-row">
		    <button type="primary" class="primary" @tap="modifyPwd">修改密码</button>
		</view>
	</view>
</template>

<script>
	import mInput from '../../components/m-input.vue'
	import headLogo from './headLogo.vue'
	export default {
		components: { mInput,headLogo },
		data() {
			return {
				phoneNo: '',
				password: '',
				code: '',
				imgInfo: {
					head: '../../static/img/head.png'
				},
				codeText:"获取验证码"
			};
		},
		methods: {
			getCode(){
				if (this.phoneNo.length != 11) {
				    uni.showToast({icon: 'none',title: '手机号码格式不正确'});
				    return;
				}
				uni.showToast({icon: 'none',title: '验证码已发送到手机'});
				this.countDown(60000);
			},
			countDown(time){
				let that= this;
				if(this.codeText=="重新获取" || this.codeText=="获取验证码"){
					let i=0;
					function  _timing(){
						setTimeout(function(){
							i+= 1000;
							if(i != time){
								that.codeText = (time-i) / 1000 +"秒后失效";
								_timing();
							}else{
								that.codeText="重新获取";
							}
						}, 1000);	
					}
					_timing();
				}
			},	
			modifyPwd() {

			}
		},
	}
</script>

<style lang="scss" scoped>
	@import 'login.scss';
</style>
